<template>
  <div class="order-list-page">
    <div class="container-big">
      <div class="page-content">
        <!-- <div class="alibaba-design" /> -->
        <!-- <div class="uncan-2019-text" /> -->
        <!-- <div class="uncan-right" /> -->
        <co-list margin class="order-list">
          <co-list-item link :to="{path: '/orderDetail', query: { billlcode: item.billlcode }}" v-for="(item, index) in list" :key="index">
            <div slot="prev" class="order-list-item">
              <div class="order-list-item-highlight" />
              <div class="order-list-item-content">
                <div class="order-list-item-status cenLeft">
                  <span :class="{'biaoqiaoPer':item.orderType==0}" class="biaoqiao ">{{item.orderType=='1'?'团购票':"个人票"}}</span>
                  {{formatStatusText(item.status)}}
                </div>
                <div class="order-list-item-info">
                  <div v-if="item.status === 0" class="item-info-message">
                    剩余时长 {{formatCountDownTime(item.createTime)}}
                  </div>
                  <div v-if="item.status !== 0" class="item-info-message">
                    下单时间 {{formatCreateTime(item.createTime)}}
                  </div>
                  <div class="item-info-message">
                    x{{item.num}} 张 合计 ¥<strong>{{item.money}}</strong>
                  </div>
                </div>
                <!-- <div class="item-info-pay-message">
                已申请电子发票
              </div> -->
              </div>
            </div>

            <span class="order-no-label">
              订单号
            </span>
            {{item.billlcode}}
          </co-list-item>
        </co-list>
      </div>
    </div>
  </div>
</template>
<script>
import services from "../../api/profile";

const addZero = value => (value > 9 ? value : `0${value}`);

export default {
  data() {
    return {
      list: [],
      loading: false,
      now: new Date().getTime()
    };
  },
  mounted() {
    this.loadOrderList();
    this.startCountDown();
  },
  beforeDestroy() {
    this.clearCountDown();
  },
  methods: {
    startCountDown() {
      this.clearCountDown();
      this.timer = setInterval(() => {
        this.now = new Date().getTime();
      }, 1000);
    },
    clearCountDown() {
      if (this.timer) clearInterval(this.timer);
    },
    formatCountDownTime(time) {
      time = new Date(time || new Date().getTime());
      const max = 30 * 60 * 1000;
      const has = max - (this.now - time);
      if (has <= 0) {
        this.loadOrderList();
      }

      const hours = Math.floor(has / (60 * 60 * 1000));
      const minutes = Math.floor((has % (60 * 60 * 1000)) / (60 * 1000));
      const seconds = Math.floor(
        ((has % (60 * 60 * 1000)) % (1000 * 60)) / 1000
      );
      return `${addZero(hours)}:${addZero(minutes)}:${addZero(seconds)}`;
    },
    formatStatusText(status) {
      return ["待支付", "交易成功", "交易关闭", "支付失败", "已退款"][
        Number(status)
      ];
    },
    formatCreateTime(time) {
      time = new Date(time || new Date().getTime());
      return `${time.getFullYear()}.${addZero(time.getMonth() + 1)}.${addZero(
        time.getDate()
      )} ${addZero(time.getHours())}:${addZero(time.getMinutes())}:${addZero(
        time.getSeconds()
      )}`;
    },
    loadOrderList() {
      if (this.loading) return;
      this.loading = true;
      // {"success":true,"errorCode":"100","errorMsg":"查询成功","result":[{"orderId":42814,"projectId":17,"billtype":0,"billlcode":"4A4MDLK58419","payway":null,"status":1,"psnId":null,"pname":"谢磊测试","cname":null,"countryCode":"86","phone":"15972961091","vnote":"这里是备注信息","userId":2816,"updateTime":1555395855000,"createTime":1555395838000,"isDel":0,"num":1,"money":0.01,"invoiceStatus":null,"countdownPayment":null},{"orderId":42817,"projectId":17,"billtype":0,"billlcode":"4A4MM16CR8FG","payway":null,"status":1,"psnId":null,"pname":"谢磊测试","cname":null,"countryCode":"86","phone":"15972961091","vnote":"这里是备注信息","userId":2816,"updateTime":1555398767000,"createTime":1555398711000,"isDel":0,"num":1,"money":0.01,"invoiceStatus":null,"countdownPayment":null},{"orderId":42900,"projectId":17,"billtype":0,"billlcode":"4A648HEA4K3F","payway":null,"status":1,"psnId":null,"pname":"优惠价格组","cname":null,"countryCode":"86","phone":"15972961091","vnote":"优惠价格组","userId":2816,"updateTime":1555899893000,"createTime":1555899850000,"isDel":0,"num":1,"money":0.01,"invoiceStatus":null,"countdownPayment":null},{"orderId":42910,"projectId":22,"billtype":0,"billlcode":"4A65STLNBAS4","payway":null,"status":1,"psnId":null,"pname":"测试价格组","cname":null,"countryCode":"86","phone":"15972961091","vnote":"测试用","userId":2816,"updateTime":1555917863000,"createTime":1555917849000,"isDel":0,"num":1,"money":0.01,"invoiceStatus":null,"countdownPayment":null},{"orderId":42911,"projectId":22,"billtype":0,"billlcode":"4A65TFEAJC9O","payway":null,"status":1,"psnId":null,"pname":"测试价格组","cname":null,"countryCode":"86","phone":"15972961091","vnote":"测试用","userId":2816,"updateTime":1555918051000,"createTime":1555918040000,"isDel":0,"num":1,"money":0.01,"invoiceStatus":null,"countdownPayment":null},{"orderId":42949,"projectId":22,"billtype":0,"billlcode":"4A6F99H5PRHL","payway":null,"status":2,"psnId":null,"pname":"官网价格组","cname":null,"countryCode":"86","phone":"15972961091","vnote":"官网","userId":2816,"updateTime":1556021088000,"createTime":1556021055000,"isDel":0,"num":1,"money":298.0,"invoiceStatus":null,"countdownPayment":null},{"orderId":43669,"projectId":22,"billtype":0,"billlcode":"4A7N859148TP","payway":null,"status":2,"psnId":null,"pname":"官网价格组","cname":null,"countryCode":"86","phone":"15972961091","vnote":"官网","userId":2816,"updateTime":1556460474000,"createTime":1556460471000,"isDel":0,"num":1,"money":298.0,"invoiceStatus":null,"countdownPayment":null},{"orderId":43897,"projectId":24,"billtype":0,"billlcode":"4AC22TJOBLME","payway":null,"status":4,"psnId":null,"pname":"默认价格组","cname":null,"countryCode":"86","phone":"15972961091","vnote":null,"userId":2816,"updateTime":1558017000000,"createTime":1557986992000,"isDel":0,"num":1,"money":0.01,"invoiceStatus":null,"countdownPayment":null},{"orderId":44033,"projectId":24,"billtype":0,"billlcode":"4AEP7FUGQK3K","payway":null,"status":2,"psnId":null,"pname":"默认价格组","cname":null,"countryCode":"86","phone":"15972961091","vnote":null,"userId":2816,"updateTime":1558946939000,"createTime":1558945138000,"isDel":0,"num":1,"money":0.01,"invoiceStatus":null,"countdownPayment":null},{"orderId":44034,"projectId":24,"billtype":0,"billlcode":"4AEP7TNEAL2S","payway":null,"status":2,"psnId":null,"pname":"默认价格组","cname":null,"countryCode":"86","phone":"15972961091","vnote":null,"userId":2816,"updateTime":1558947087000,"createTime":1558945286000,"isDel":0,"num":1,"money":0.01,"invoiceStatus":null,"countdownPayment":null},{"orderId":44035,"projectId":24,"billtype":0,"billlcode":"4AEPIISURISP","payway":null,"status":2,"psnId":null,"pname":"默认价格组","cname":null,"countryCode":"86","phone":"15972961091","vnote":null,"userId":2816,"updateTime":1558950750000,"createTime":1558948949000,"isDel":0,"num":2,"money":0.02,"invoiceStatus":null,"countdownPayment":null},{"orderId":44036,"projectId":24,"billtype":0,"billlcode":"4AEPSBETKFQB","payway":null,"status":0,"psnId":null,"pname":"默认价格组","cname":null,"countryCode":"86","phone":"15972961091","vnote":null,"userId":2816,"updateTime":1556004036000,"createTime":1558952305000,"isDel":0,"num":2,"money":0.02,"invoiceStatus":null,"countdownPayment":null}],"arguments":null}
      services
        .getOrderList()
        .then(data => {
          this.loading = false;
          if (!data) {
            this.$toast("您未生成订单");
          }
          this.list = data || [];
          console.log(this.list);
        })
        .catch(() => {
          this.loading = false;
        });
    }
  }
};
</script>

<style lang="less">
.order-list-page {
  position: relative;
  height: 100%;
  .page-content {
    position: relative;
    padding-top: 196px;
    padding-left: 30px;
    padding-right: 30px;
  }
  .order-no-label {
    margin-right: 50px;
  }

  .order-list {
    .co-list-item {
      margin: 0;
      margin-bottom: 16px;
    }
  }

  .order-list-item {
    background: #282b31;
    overflow: hidden;
    border-top-left-radius: 4px; /*no*/
    border-top-right-radius: 4px; /*no*/
  }

  .order-list-item-highlight {
    opacity: 0.8;
    background-image: linear-gradient(-116deg, #3cb9ff 0%, #6044d4 100%);
    height: 8px;
  }

  .order-list-item-content {
    padding: 24px 20px;
    text-align: left;
  }
  .order-list-item-status {
    font-size: 32px;
  }

  .order-list-item-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }

  .item-info-message,
  .item-info-pay-message {
    font-size: 20px;
    > strong {
      font-size: 32px;
      font-weight: normal;
    }
  }

  .item-info-pay-message {
    margin-top: 10px;
  }
}
.biaoqiao {
  width: auto;
  height: auto;
  text-align: center;
  background-image: linear-gradient(-116deg, #ff6325 0%, #ed006f 100%);
  border-radius: 6px;
  font-size: 26px;
  padding: 2px 6px;
  margin-right: 10px;
}
.biaoqiaoPer {
  background-image: linear-gradient(-116deg, #3cb9ff 0%, #6044d4 100%);
}
</style>
